import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12

Rectangle {
    color: "transparent"
    
    // 页面状态
    property int selectedNavItem: 0 // 0: 上下位机, 1: 指挥中心
    property int selectedTopButton: 0 // 0: 运行所有诊断, 1: 查看历史记录, 2: 诊断设置, 3: 导出报告
    
    RowLayout {
        anchors.fill: parent
        anchors.margins: 16
        spacing: 16
        
        // 左侧导航栏
        Rectangle {
            id: leftNavigation
            color: "#ecf0f1"
            radius: 8
            Layout.preferredWidth: 140
            Layout.fillHeight: true
            
            ColumnLayout {
                anchors.fill: parent
                spacing: 0
                
                /* 通信诊断标题
                Rectangle {
                    color: "#34495e"
                    radius: 8
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50
                    Layout.margins: 8
                    
                    Label {
                        anchors.centerIn: parent
                        text: "通信诊断"
                        color: "white"
                        font.pixelSize: 16
                        font.bold: true
                    }
                }
                */
                // 导航按钮组
                ColumnLayout {
                    Layout.fillWidth: true
                    Layout.margins: 8
                    spacing: 4
                    
                    Repeater {
                        model: [
                            { name: "上下位机", index: 0 },
                            { name: "指挥中心", index: 1 }
                        ]
                        
                        Button {
                            property bool isSelected: modelData.index === selectedNavItem
                            text: modelData.name
                            Layout.fillWidth: true
                            Layout.preferredHeight: 40
                            
                            background: Rectangle {
                                color: isSelected ? "#3498db" : "#bdc3c7"
                                radius: 6
                                border.color: isSelected ? "#2980b9" : "#95a5a6"
                                border.width: 1
                            }
                            
                            contentItem: Text {
                                text: parent.text
                                color: isSelected ? "white" : "#2c3e50"
                                font.pixelSize: 14
                                font.bold: isSelected
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                            }
                            
                            onClicked: {
                                selectedNavItem = modelData.index
                            }
                        }
                    }
                }
                
                // 填充剩余空间
                Item {
                    Layout.fillHeight: true
                }
            }
        }
        
        // 右侧主内容区域
        Rectangle {
            color: "#ecf0f1"
            radius: 8
            Layout.fillWidth: true
            Layout.fillHeight: true
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 16
                spacing: 16
                
                // 顶部功能按钮区域
                RowLayout {
                    spacing: 12
                    Layout.alignment: Qt.AlignLeft
                    Layout.fillWidth: true
                    
                    Repeater {
                        model: [
                            { text: "运行所有诊断", index: 0, color: "#4A90E2" },
                            { text: "查看历史记录", index: 1, color: "#A8C8EC" },
                            { text: "诊断设置", index: 2, color: "#A8C8EC" },
                            { text: "导出报告", index: 3, color: "#7CB342" }
                        ]
                        
                        Button {
                            property bool isSelected: modelData.index === selectedTopButton
                            text: modelData.text
                            Layout.preferredWidth: 120
                            Layout.preferredHeight: 40
                            
                            background: Rectangle {
                                radius: 8
                                color: modelData.color
                                border.color: modelData.color
                                border.width: 1
                            }
                            
                            contentItem: Text {
                                text: parent.text
                                color: "white"
                                font.pixelSize: 12
                                font.bold: true
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                            }
                            
                            onClicked: {
                                selectedTopButton = modelData.index
                            }
                        }
                    }
                    
                    Item { Layout.fillWidth: true }
                }
                
                // 诊断内容区域
                ScrollView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    
                    ScrollBar.vertical.policy: ScrollBar.AsNeeded
                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                    
                    ColumnLayout {
                        width: parent.width
                        spacing: 16
                        
                        // 诊断区域列表
                        Repeater {
                            model: [
                                { title: "上下位机诊断", height: 200 },
                                { title: "无线通信诊断", height: 180 },
                                { title: "XXX诊断", height: 160 },
                                { title: "XXX诊断", height: 160 }
                            ]
                            
                            Rectangle {
                                Layout.fillWidth: true
                                Layout.preferredHeight: modelData.height
                                color: "white"
                                radius: 8
                                border.color: "#bdc3c7"
                                border.width: 1
                                
                                layer.enabled: true
                                layer.effect: DropShadow {
                                    horizontalOffset: 0
                                    verticalOffset: 2
                                    radius: 4
                                    samples: 8
                                    color: "#20000000"
                                }
                                
                                ColumnLayout {
                                    anchors.fill: parent
                                    anchors.margins: 16
                                    spacing: 12
                                    
                                    // 诊断区域标题和确认按钮
                                    RowLayout {
                                        Layout.fillWidth: true
                                        
                                        Label {
                                            text: modelData.title
                                            font.pixelSize: 16
                                            font.bold: true
                                            color: "#2c3e50"
                                            Layout.fillWidth: true
                                        }
                                        
                                        Button {
                                            text: "发送信号确认"
                                            Layout.preferredWidth: 120
                                            Layout.preferredHeight: 32
                                            
                                            background: Rectangle {
                                                radius: 6
                                                color: "#3498db"
                                                border.color: "#2980b9"
                                                border.width: 1
                                            }
                                            
                                            contentItem: Text {
                                                text: parent.text
                                                color: "white"
                                                font.pixelSize: 11
                                                horizontalAlignment: Text.AlignHCenter
                                                verticalAlignment: Text.AlignVCenter
                                            }
                                            
                                            onClicked: {
                                                console.log("发送信号确认:", modelData.title)
                                            }
                                        }
                                    }
                                    
                                    // 诊断内容区域
                                    Rectangle {
                                        Layout.fillWidth: true
                                        Layout.fillHeight: true
                                        color: "#f8f9fa"
                                        radius: 6
                                        border.color: "#e9ecef"
                                        border.width: 1
                                        
                                        // 诊断内容占位符
                                        ColumnLayout {
                                            anchors.fill: parent
                                            anchors.margins: 12
                                            spacing: 8
                                            
                                            Label {
                                                text: "诊断结果显示区域"
                                                color: "#6c757d"
                                                font.pixelSize: 12
                                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                            }
                                            
                                            // 模拟诊断数据
                                            Repeater {
                                                model: Math.floor(modelData.height / 40) - 2
                                                
                                                RowLayout {
                                                    Layout.fillWidth: true
                                                    spacing: 12
                                                    
                                                    Rectangle {
                                                        width: 8
                                                        height: 8
                                                        radius: 4
                                                        color: index % 3 === 0 ? "#27ae60" : (index % 3 === 1 ? "#f39c12" : "#e74c3c")
                                                    }
                                                    
                                                    Label {
                                                        text: "诊断项目 " + (index + 1) + ": " + (index % 3 === 0 ? "正常" : (index % 3 === 1 ? "警告" : "异常"))
                                                        color: "#495057"
                                                        font.pixelSize: 11
                                                        Layout.fillWidth: true
                                                    }
                                                    
                                                    Label {
                                                        text: new Date().toLocaleTimeString()
                                                        color: "#6c757d"
                                                        font.pixelSize: 10
                                                    }
                                                }
                                            }
                                            
                                            Item { Layout.fillHeight: true }
                                        }
                                    }
                                }
                            }
                        }
                        
                        // 底部填充空间
                        Item {
                            Layout.preferredHeight: 20
                        }
                    }
                }
            }
        }
    }
}
